<template>
  <div class="stylist">
  <div class="stylist-img">
  <img src="../images/stylist/stylist.png">
  </div>
  <div class="stylist-info">
  <div class="info-title">
  <span>店铺列表</span>store
  </div>
  <div class="info-content">
  <ul>
  <router-link  :to="{path:'/stylist_shop',query:{ id:item.shop_id }}"  tag="li" v-for='(item,key) in list' :key='key'>
  <div class="info-left">
  <img :src="item.shop_logo">
  <span>{{item.shop_name}}</span>
  </div>
  <div class="info-right">
  <span>查看</span><i>></i>
  </div>
  </router-link>
    <div class='clearfix'></div>
  </ul>
  </div>
  </div>
    <div class="cb"></div>
    <div class="footer">
      <p>暂无更多</p>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
export default {
    data(){
      return{
          list:[],

      }
    },
    created(){
       const that = this;
       const url = that.getUrl('stylist');
       that.$http.get(url).then(res =>{
           that.list = res.data.data.list;
       },err => {
           that.$messagebox('提示', '找不到服务器，请稍后再试');
       })
    }
}
</script>
<style  lang="less" rel="stylesheet/less">
@import "../../lib/less/variable";
@import "../../lib/less/normalize";
.stylist{
width: 100%;
.stylist-img{
width: 100%;
background: #fff;
.padding(5,5);
img{
width:100%;
}
}
.stylist-info{
background: #fff;
width: 100%;
.h(36);
.lh(36);
.info-title{
width: 100%;
.fs(12);
span{
.fs(14);
.ml(10);
.mr(5);
.pb(3);
border-bottom: 3px solid #0F7AE0;
}
}
.info-content{
width: 100%;
background: #fff;
ul{
li{
width: 100%;
.h(60);
box-shadow:0px 0px  5px 2px #aaa;
.mb(10);
.info-left{
width: 50%;
  float: left;
.lh(60);
box-sizing: border-box;
display: inline-block;
span{
.fs(14);
}
img{
border-radius: 50%;
vertical-align: middle;
.h(40);
.w(40);
.ml(10);
.mr(10);
}
}
.info-right{
width: 50%;
  height: 100%;
  .lh(58);
  float: left;
display: inline-block;
text-align: right;
.fs(14);
span{
color:#57B6E8;
}
i{
font-style: normal;
.fs(20);
color:#ccc;
vertical-align: middle;
.ml(20);
.mr(10);
}
}
}
}
}
}
}
</style>
